<template>
    <div class="Banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div
                    class="swiper-slide"
                    data-swiper-autoplay="500"
                    v-for="(item, index) in imgData"
                    :key="index"
                >
                    <img :src="item.pic" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
    name: "Banner",
    props: {


    },
    data() {
        return {
            // 轮播图图片数据
            imgData: [
                // {
                //     bannerId: null,
                //     encodeId: null,
                //     targetId: null,
                //     pic: null
                // }
            ],
        }
    },
    methods: {
        // 获取数据
        getBanner() {
            this.axios({
                method: "GET",
                url: "/banner",
                params: { type: 2 }
            }).then((result) => {
                // console.log("🚀 ==> getBanner ==> result", result);
                if (result.data.code === 200) {
                    result.data.banners.forEach((v, i) => {
                        this.imgData.push({
                            bannerId: v.bannerId,
                            encodeId: v.encodeId,
                            targetId: v.targetId,
                            pic: v.pic,
                        })
                    });
                    // console.log("🚀 ==> result.data.banners ==>  this.imgData", this.imgData);

                    setTimeout(() => {
                        this.$nextTick(() => {
                            new Swiper('.swiper-container', {
                                observer: true,
                                observeParents: true,
                                //速度
                                speed: 1500,
                                //自动播放设置
                                autoplay: true,
                                autoplayDisableOnInteraction: false,

                                preventLinksPropagation: false,  // 阻止点击事件冒泡
                                loop: true,
                                slidesPerGroup: 3,
                                effect: 'fade',
                            })
                        });

                         this.$emit('complete');
                    }, 500)
                }
            }).catch((err) => {
                console.log("🚀 ==> getBanner ==> err", err);
            });
        }
    },
    created() {
        this.getBanner();
    }
}
</script>

<style lang="less" scoped>
.Banner {
    // background-color: red;

    padding: 8px;
    .swiper-container {
        border-radius: 5px;
        box-shadow: 0px 0.6px 3px 0px #fb950e;

        .swiper-slide {
            // width: 100%;
            color: #fff;
            font-size: 80px;
            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }
    }
}
</style>